<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			img{
				display: block;
				width: 100%;
				height: 100%;
			}
			.banner{
				width: 600px;
				height: 220px;
				position: relative;
				left: 0;
				right: 0;
				margin: 200px auto;
				overflow: hidden;
			}
			.banner li{
				z-index: 1;
				position: absolute;
				width: 600px;
				height: 220px;
				top: 0;
				left: 0;
				transition: 0.4s;
				overflow: hidden;
			}
			.banner .list1{
				left: -600px;
			}
			.banner .list2{
				z-index: 10;
				left: 0;
			}
			.banner .list3{
				left: 600px;
			}
			.banner .list4{
				left: 1200px;
			}
			.main div{
				z-index: 100;
				position: absolute;
				width: 35px;
				height: 35px;
				background-color: rgba(0,0,0,0.2);
				font-size: 20px;
				line-height: 35px;
				text-align: center;
				color: rgba(255,255,255,0.4);
				top: 0;
				bottom: 0;
				margin: auto;
				cursor: pointer;
			}
			.main div:hover{
				background-color: rgba(0,0,0,0.4);
				color: rgba(255,255,255,0.8);
			}
			.main .rightBut{
				right: 0;
			}
			.track{
				z-index: 100;
				width: 124px;
				height: 6px;
				position: absolute;
				bottom: 5px;
				left: 0;
				right: 0;
				margin: auto;
			}
			.track span{
				display: block;
				float: left;
				border-radius: 3px;
				width: 25px;
				height: 6px;
				margin: 0 3px;
				background-color: #bbb;
			}
			.focus{
				background-color: #38f !important;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<div class="main">
				<ul>
					<li class="list1"><img src="img/001.jpg"/></li>
					<li class="list2"><img src="img/002.jpg"/></li>
					<li class="list3"><img src="img/003.jpg"/></li>
					<li class="list4"><img src="img/004.jpg"/></li>
				</ul>
				<div class="leftBut">&lt;</div>
				<div class="rightBut">&gt;</div>
			</div>
			<div class="track">
				<span class="focus"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				var span = document.getElementsByTagName('span');
				var li = document.getElementsByTagName("li");
				var leftBut = document.getElementsByClassName('leftBut')[0];
				var rightBut = document.getElementsByClassName('rightBut')[0];
				var index = 0;
				var arr = ["list1","list2","list3","list4"];
				function blue(){
					for(var i = 0; i < span.length; i ++){
						span[i].setAttribute('class','');
					}
					span[index].setAttribute('class','focus');
				}
				function move(){
					for(var i = 0; i < li.length; i++) {
						li[i].setAttribute("class", arr[i]);
					}
				}
				function rightMove(){
					arr.unshift(arr[3]);
					arr.pop();
					move();
					index ++;
					if(index > 3){
						index = 0;
					}
					blue();
				}
				function leftMove(){
					arr.push(arr[0]);
					arr.shift();
					move();
					index --;
					if(index < 0){
						index = 3;
					}
					blue();
				}
				function play(){
					timer = setInterval(function(){
						rightMove();
					},3000);
					blue();
				}
				rightBut.onclick = function(){
					clearInterval(timer)
					rightMove()
					play()
				}
				leftBut.onclick = function(){
					clearInterval(timer)
					leftMove()
					play()
				}
				play();
			}
		</script>
	</body>
</html>
